{% extends "layout.html" %}

{% block extra_css %}
    <!-- blueimp Gallery styles -->
    <link rel="stylesheet" href="{{ url_for('static', filename='plugin/Gallery-2.25.0/css/blueimp-gallery.min.css') }}">
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/css/jquery.fileupload.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/css/jquery.fileupload-ui.css') }}">
    <!-- CSS adjustments for browsers with JavaScript disabled -->
    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/css/jquery.fileupload-noscript.css') }}"></noscript>
    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/css/jquery.fileupload-ui-noscript.css') }}"></noscript>
{% endblock %}

{% block content %}
<div class="container">
    <h2 class="lead">
    {% if order_info.pay_time %}
        <p class="text-warning">
        付款时间：[{{ moment(order_info.pay_time).format('YYYY-MM-DD HH:mm:ss') }}]
        </p>
    {% else %}
        <p class="text-warning">
        等待对方付款，剩余付款时间：[{{ moment(order_info.create_time | time_delta(3600*24*2)).fromNow(refresh=True) }}]
        </p>
    {% endif %}
    {% if order_info.rec_time %}
        <p class="text-warning">
        确认收款时间：[{{ moment(order_info.rec_time).format('YYYY-MM-DD HH:mm:ss') }}]
        </p>
    {% elif order_info.pay_time %}
        <p class="text-warning">
        剩余确认时间：[{{ moment(order_info.pay_time | time_delta(3600*24*2)).fromNow(refresh=True) }}]
        </p>
    {% endif %}
    </h2>
    <br>
{#    <blockquote>#}
{#        <p class="text-muted">奖励规则：提前（1小时内）确认，奖励利息（2%）</p>#}
{#        <p class="text-muted">惩罚规则：延迟（超过24小时）确认，扣除罚息（2%）；<br/>收款后超过48小时不确认，系统自动进行确认，并立即封号，收款方需联系客服解封账户</p>#}
{#        <footer>规则最终解释 <cite title="Source Title">运营团队</cite></footer>#}
{#    </blockquote>#}
    <section id="order_info">
        <div class="panel panel-default">
        <div class="panel-heading">
            <strong class="panel-title">订单信息
            <span class="glyphicon glyphicon-cog pull-right"></span>
            </strong>
        </div>
        <table class="table table-hover table-responsive">
            <thead>
                <tr>
                    <th>订单ID</th>
                    <th>用户ID</th>
                    <th>用户名称</th>
                    <th>订单类型</th>
                    <th>订单金额</th>
                    <th>审核状态</th>
                    <th>支付状态</th>
                    <th>收款状态</th>
                    <th>删除状态</th>
                    <th>订单时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ order_info.id }}</td>
                    <td>{{ order_info.apply_put_uid }}</td>
                    <td>{{ order_info.apply_put_uid | nickname }}</td>
                    <td>{{ order_info.type | type_order }}</td>
                    <td>{{ order_info.money }}</td>
                    <td>{{ order_info.status_audit | status_audit }}</td>
                    <td>{{ order_info.status_pay | status_pay }}</td>
                    <td>{{ order_info.status_rec | status_rec }}</td>
                    <td>{{ order_info.status_delete | status_delete }}</td>
                    <td>{{ moment(order_info.create_time).format('YYYY-MM-DD HH:mm:ss') }}</td>
                </tr>
            </tbody>
        </table>
        </div>
    </section>
    <section id="bank_info">
        <div class="panel panel-default">
        <div class="panel-heading">
            <strong class="panel-title">收款信息
            <span class="glyphicon glyphicon-cog pull-right"></span>
            </strong>
        </div>
        <table class="table table-hover table-responsive">
            <thead>
                <tr>
                    <th>类型名称</th>
                    <th>账号名称</th>
                    <th>是否支持</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>账户名称</td>
                    <td>{{ bank_info.account_name }}</td>
                    <td><span class="glyphicon glyphicon-ok"></span></td>
                </tr>
                <tr>
                    <td>银行名称</td>
                    <td>{{ bank_info.bank_name }}</td>
                    <td><span class="glyphicon glyphicon-ok"></span></td>
                </tr>
                <tr>
                    <td>支行名称</td>
                    <td>{{ bank_info.bank_address }}</td>
                    <td><span class="glyphicon glyphicon-ok"></span></td>
                </tr>
                <tr>
                    <td>银行卡号</td>
                    <td>{{ bank_info.bank_account }}</td>
                    <td><span class="glyphicon glyphicon-ok"></span></td>
                </tr>
                <tr>
                    <td>支付宝</td>
                    <td></td>
                    <td><span class="glyphicon glyphicon-remove"></span></td>
                </tr>
                <tr>
                    <td>微信支付</td>
                    <td></td>
                    <td><span class="glyphicon glyphicon-remove"></span></td>
                </tr>
            </tbody>
        </table>
        </div>
    </section>

{% if order_bill_lists %}
    <section id="bank_info">
        <div class="panel panel-default">
        <div class="panel-heading">
            <strong class="panel-title">付款凭证
            <span class="glyphicon glyphicon-cog pull-right"></span>
            </strong>
        </div>
        <table class="table table-hover table-responsive">
            <thead>
                <tr>
                    <th>凭证预览</th>
                    <th>凭证名称</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                {% for order_bill in order_bill_lists %}
                <tr>
                    <td>
                        <span class="preview">
                            <a href="/static/uploads/{{ order_bill.bill_img }}" title="{{ order_bill.bill_img }}" download="{{ order_bill.bill_img }}" data-gallery="">
                                <img src="/static/uploads/{{ order_bill.bill_img }}" height="80">
                            </a>
                        </span>
                    </td>
                    <td>
                        <p class="name">
                            <a href="/static/uploads/{{ order_bill.bill_img }}" title="{{ order_bill.bill_img }}" download="{{ order_bill.bill_img }}" data-gallery="">
                                {{ order_bill.bill_img }}
                            </a>
                        </p>
                    </td>
                    <td><span class="glyphicon glyphicon-ok"></span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </section>
{% endif %}
    <br>
{% if order_info.status_pay == 1 and order_info.status_rec != 1 %}
    <div class="btn-group pull-right" role="group" aria-label="...">
        <a type="button" class="btn btn-success" href="javascript:void(0);" onclick="order_rec({{ order_info.id }}, 1);">
            <span class="glyphicon glyphicon-ok"></span> 收款成功
        </a>
        <a type="button" class="btn btn-warning" href="javascript:void(0);" onclick="order_rec({{ order_info.id }}, 2);">
            <span class="glyphicon glyphicon-remove"></span> 收款失败
        </a>
    </div>
{% endif %}


</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

{% raw %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">上传中...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>上传</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnail_url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnail_url%}" height="80"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnail_url?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">上传错误</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.delete_url) { %}
                <button class="btn btn-danger delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>删除</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
{% endraw %}

{% endblock %}

<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->


{% block extra_js %}
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/vendor/jquery.ui.widget.js') }}"></script>
    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="{{ url_for('static', filename='plugin/JavaScript-Templates-3.8.0/js/tmpl.min.js') }}"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="{{ url_for('static', filename='plugin/JavaScript-Load-Image-2.12.2/js/load-image.all.min.js') }}"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="{{ url_for('static', filename='plugin/JavaScript-Canvas-to-Blob-3.7.0/js/canvas-to-blob.min.js') }}"></script>
    <!-- blueimp Gallery script -->
    <script src="{{ url_for('static', filename='plugin/Gallery-2.25.0/js/jquery.blueimp-gallery.min.js') }}"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.iframe-transport.js') }}"></script>
    <!-- The basic File Upload plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload.js') }}"></script>
    <!-- The File Upload processing plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-process.js') }}"></script>
    <!-- The File Upload image preview & resize plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-image.js') }}"></script>
    <!-- The File Upload audio preview plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-audio.js') }}"></script>
    <!-- The File Upload video preview plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-video.js') }}"></script>
    <!-- The File Upload validation plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-validate.js') }}"></script>
    <!-- The File Upload user interface plugin -->
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/jquery.fileupload-ui.js') }}"></script>

    <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
    <!--[if (gte IE 8)&(lt IE 10)]>
    <script src="{{ url_for('static', filename='plugin/jQuery-File-Upload-9.18.0/js/cors/jquery.xdr-transport.js') }}"></script>
    <![endif]-->
    <script>
    $(function () {
        //初始化，主要是设置上传参数，以及事件处理方法(回调函数)
        $('#fileupload').fileupload({});

        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });
    });
    // 收款状态确认
    function order_rec(order_id, status_rec) {
        // console.log($(form).serialize());
        $.ajax({
            url: "{{ url_for('order.ajax_rec') }}",
            type: 'POST',
            data: {order_id: order_id, status_rec: status_rec},
            dataType: 'json',
            success: function (result) {
                // console.log(result);
                if(result.hasOwnProperty('error')){
                    alert(result.error);
                }else {
                    alert(result.success);
                    document.location.reload();
                }
            }
        });
        return false;
    }
    </script>
{% endblock %}
